Здравствуйте)))
вот код
var countF = 0;
var input;
$("#load").change(function() {
countF = this.files.length -1;
input = this;
readURL(this, 0);
$(".Bar").show();
upload(this.files[0], onSuccessUpload, onError, onProgress);
});
function readURL(input, idFile) {
if (input.files && input.files[idFile]) {
var reader = new FileReader();
reader.onload = function (e) {
html = '<img src=' + e.target.result + '>';
}
reader.readAsDataURL(input.files[idFile]);
}
}
function onSuccessUpload(data) {
data = JSON.parse(data);
if(data.success != 0)
console.log("ok");
else
console.log(data.error);
}
function onError() {
}
function onProgress(loaded, total) {
proc = (loaded / total) * 100;
$(".Bar").css("width",proc + "%");
}
function upload(file, onSuccessUpload, onError, onProgress) {
var xhr = new XMLHttpRequest();
xhr.onload = xhr.onerror = function() {
if(this.status != 200 || this.statusText != 'OK') {
onError(this);
return;
}
onSuccess(this.responseText);
};
xhr.upload.onprogress = function(event) {
onProgress(event.loaded, event.total);
}
xhr.open("POST", SADRESS + "load.php", true);
var formData = new FormData();
formData.append("photo", file);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.timeout = 300000;
xhr.send(formData);
}
пример работы такого скрипта -
1. Выбираем фото отслеживаем изменение формы <input type="file" name="photo">
2. С помощью var reader = new FileReader(); показываем фото, которое в данный момент загружаем
3. Отправляем на сервер и отображаем процесс загрузки
Все работает!) но есть один непонятный баг...
Если мы выбираем фото размером не больше 2мб то работает все как надо: отображается превью, после появляется бар загрузки и загружается фото (дальше с него делаем превью)
А если выбрать фото например весом в 15мб, тут происходит странное для меня:
показывается бар загрузки, он начинает менять свое значение, в это время подгружается превью, потом бар загрузки доходит до конца 100% (не всегда до 100%) и начинается с 0% как будто мы снова выбрали файл.
Что я вижу на сервере: вместо одной фотки я получил две, то есть php скрипт отработал два раза, самое странное что в консоли я вижу только один post запрос, думал что в php ошибся, час исправлял этот скриптик, перебирал разные варианты ничего не помогло...
Потом решил для ускорения загрузки пока не пользоваться функцией function readURL(input, idFile) которая отображает превью (base64), и скрипт php загружает только одну фотографию, то есть работает как задумывалось!
Как мне исправить чтобы и превью отображалось размером до 50мб и загружалась только одна фотка, чтобы php скрипт отрабатывал один раз, а не два.
В чем дело подскажите дереву?))
